<template>
  <div>
     <div class="vchartAll" >
        <div class="topAll">
            <div class="top1">
               <div class="top2">新增线索统计</div>
               <div class="top3">
                 <div style="color: blue;">本月</div>
                 <div class="top4">本年</div>
               </div>
               <div class="top5">
                  <div>
                    <div class="spa">12</div>
                    <div>有效线索</div>
                  </div>
                  <div>
                     <div class="spa">47</div>
                     <div>无效线索</div>
                  </div>
               </div>
            </div>
            <div class="top1">
                <div class="top2">线索分配统计</div>
                <div class="top3">
                 <div style="color: blue;">本月</div>
                 <div class="top4">本年</div>
               </div>
               <div class="top5">
                  <div>
                    <div class="spa">12</div>
                    <div>有效线索</div>
                  </div>
                  <div>
                     <div class="spa">47</div>
                     <div>无效线索</div>
                  </div>
                 </div>
            </div>
            <div class="top1">
                <div class="top2">线索处理统计</div>
                <div class="top3">
                 <div style="color: blue;">本月</div>
                 <div class="top4">本年</div>
               </div>
               <div class="top5">
                  <div>
                    <div class="spa">12</div>
                    <div>有效线索</div>
                  </div>
                  <div>
                     <div class="spa">47</div>
                     <div>无效线索</div>
                  </div>
                 </div>
            </div>
            <div class="top1">
                <div class="top2">客服注册统计</div>
                <div class="top3">
                 <div style="color: blue;">本月</div>
                 <div class="top4">本年</div>
               </div>
               <div class="top5">
                  <div>
                    <div class="spa">12</div>
                    <div>有效线索</div>
                  </div>
                  <div>
                     <div class="spa">47</div>
                     <div>无效线索</div>
                  </div>
                 </div>
            </div>
        </div>
        <div style="background-color: aliceblue;">
            <div style="width: 75%;height: 100px;margin-left: -60px;">
                <div style="margin-left: 100px;padding-top: 40px;margin-bottom: 10px;margin-top: 10px;">线索统计</div>
                <vchart></vchart>
            </div>
            <div style="width: 500px;height: 500px;margin-left: 66%;margin-top: -100px;">
                <div style="margin-left: 40px;margin-top: 10px;margin-bottom: 10px;">线索来源分析</div>
                <div>
                    <bing></bing>
                </div>
            </div> 
        </div>
        <div style="background-color: aliceblue;width: 100%;height: 500px;margin-top: 20px;">
             <div style="width: 100%;height: 400px;">
                <test></test>
             </div>
        </div>
     </div>
  </div>
</template>
<script>
import vchart from '../chartview/zhezhu.vue'
import bing from '../chartview/bing.vue'
import test from '../chartview/test.vue'
export default{
    data() {
        return {
            
        }
    },
    components:{
        vchart,
        bing,
        test
    }
}
</script>
<style>
.varchartAll{
    width: 100%;
    background-color: rgb(19, 153, 153);
}
.topAll{
    display: flex;
    justify-content: space-evenly;
}
.top1{
    width: 400px;
    height: 200px;
    background-color: rgb(207, 66, 66);
    margin:10px
}
.top2{
    margin-left: 10px;
    margin-top: 15px;
}
.top3{
    display: flex;
    margin-left: 250px;
}
.top4{
    margin-left: 10px;
    margin-right: 10px;
}
.top5{
    display: flex;
    justify-content: center;
    margin-top: 20px;
}
.top5 div{
    margin-left: 5px;
    margin-right: 5px;
    text-align: center;
}
.spa{
    font-size: 20px;
    font-weight: bold;
}
</style>